//1. 引入 gulp 模块
const gulp = require('gulp');
const fs = require('fs');
//引入 jshint 工具
const jshint = require('gulp-jshint');
//引入 babel 
const babel = require('gulp-babel');
//引入打包 CommonJS 工具包
const browserify = require('gulp-browserify');
//输出结果重命名
const rename = require('gulp-rename');
//JS代码压缩包
const uglify = require('gulp-uglify');
//导入 gulp-less 插件
const less = require('gulp-less');
//导入自动添加 样式前缀包
const LessAutoprefix = require('less-plugin-autoprefix');
//last 2 versions 兼容每款浏览器最新的两个版本
const autoprefix = new LessAutoprefix({ browsers: ['last 20 versions'] });
//导入合并 css 工具
const concat = require('gulp-concat');
//导入压缩 css 工具
const cssmin = require('gulp-cssmin');
//导入压缩 html 工具
const htmlmin = require('gulp-htmlmin');
//热加载工具
const livereload = require('gulp-livereload');
//http服务工具
const connect = require('gulp-connect');
//自动打开浏览器工具
const opn = require('opn');

//2. 创建 gulp 任务
gulp.task('hello', async (cb) => {
    console.log('HELLO Gulp');
});

//创建检查 JS 质量的任务
gulp.task('jshint', function () {
    // 将你的任务的任务代码放在这  src 设置源文件的位置
    return gulp.src('./src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default')).pipe(livereload());
});

//语法转换
gulp.task('babel', function(){
    return gulp.src('./src/js/*.js') // * 统配
        .pipe(babel({ //进行语法转换
            presets: ['@babel/env']
        })).pipe(gulp.dest('build/js')).pipe(livereload())//输出到指定目录   dest 目的地
});

//打包文件
gulp.task('browserify', function(){
    return gulp.src('./build/js/app.js')  //设置 CommonJS 入口文件
        .pipe(browserify())					//将CommonJs语法转换为浏览器能识别的语法
        .pipe(rename('built.js'))			//为了防止冲突将文件重命名
        .pipe(gulp.dest('build/js')).pipe(livereload())		//输出到指定位置
});

//创建一个串行任务  export default {}   import {default as A} from './v';
// gulp.task('default', gulp.series('jshint', 'babel', 'browserify'));

//压缩任务  uglify 丑陋的
gulp.task('uglify', function () {
    return gulp.src('build/js/built.js')  //获取要压缩的文件
      .pipe(uglify())  //压缩js
      .pipe(rename('dist.min.js'))
      .pipe(gulp.dest('dist/js')).pipe(livereload())  //输出到 dist/js
  });

//less 语法转换
gulp.task('less', function () {
    return gulp.src('./src/css/*.less')  //获取要编译的 less 文件
      .pipe(less({
        plugins: [autoprefix]//设置自动扩展前缀插件 
      }))
      .pipe(gulp.dest('./build/css')).pipe(livereload());
  });

//定义任务合并 css
gulp.task('concat', function () {
    return gulp.src('./build/css/*.css') //获取待合并的css文件
        .pipe(concat('built.css'))
        .pipe(gulp.dest('./build/bcss')).pipe(livereload());
});

//压缩css文件任务
gulp.task('cssmin', function () {
    return gulp.src('build/bcss/built.css') //获取待压缩的 css 文件
        .pipe(cssmin())
        .pipe(rename('dist.min.css'))
        .pipe(gulp.dest('dist/css')).pipe(livereload());
});

//压缩 html 任务
gulp.task('htmlmin', () => {
    return gulp.src('src/index.html') //获取待压缩的 html 文件
      .pipe(htmlmin({
        collapseWhitespace: true ,//去除空格
        removeComments:true //去除注释
      }))
      .pipe(gulp.dest('dist')).pipe(livereload());
  });

//自动化任务配置
//1. 在所有可能要执行任务后面加上 .pipe(livereload());
gulp.task('default', function () {
    // 2. 启动热加载服务
    livereload.listen();
    //3. 通过自己服务器打开项目，自动刷新  启动http服务
    connect.server({
        root: 'dist',  //http服务的网站根目录
        port: 3000,    //端口号
        livereload: true //
    });
    // //3. 自动打开浏览器
    opn('http://127.0.0.1:3000/index.html');
    //4. 监视指定文件（第一个参数），一旦文件发生变化，就自动执行后面的任务（第二个参数）
    gulp.watch('src/css/*.less', gulp.series(['less', 'concat', 'cssmin']));
    gulp.watch('./src/js/*.js', gulp.series(['jshint', 'babel', 'browserify', 'uglify']));
    gulp.watch('./src/index.html', gulp.series('htmlmin'));
});